import styled from "@emotion/styled";
import { Button, Dropdown, Image, Menu, Table, Typography } from "antd";
import { DeleteContent } from "http/content-http";
import dayjs from "dayjs";
import { useDispatch, useSelector } from "react-redux";
import { contentObj, editActions, selectContent } from "./edit.slice";
import { useShowEditModal } from "./util";
import { useCallback } from "react";

export const EditListScreens = () => {
  const dispatch = useDispatch();
  const onDeleteContent = useCallback(
     (id: number) => {
      DeleteContent(id).then((id) => {
        dispatch(editActions.deleteContent(id));
      });
    }, [dispatch]);

  const showModal = useShowEditModal();

  return (
    <Container>
      <Table
        rowKey="id"
        pagination={false}
        size={"middle"}
        dataSource={useSelector(selectContent)}
        columns={[
          {
            title: "ID",
            width: "4rem",
            align: "center",
            dataIndex: "id",
            sorter: (a, b) => {
              return Number(a.id) - Number(b.id);
            },
          },
          {
            title: "标题",
            width: "8rem",
            align: "center",

            render(value, contentObj: contentObj) {
              return (
                <Typography.Paragraph
                  ellipsis={{
                    rows: 2,
                    tooltip: true,
                  }}
                >
                  {contentObj.title}
                </Typography.Paragraph>
              );
            },
          },

          {
            title: "作者",
            width: "4rem",
            align: "center",
            dataIndex: "author",
          },
          {
            title: "标签",
            width: "10rem",
            align: "center",
            dataIndex: "tag",
          },
          {
            title: "简介",
            width: "10rem",
            align: "center",
            render(value, contentObj: contentObj) {
              return (
                <Typography.Paragraph
                  ellipsis={{
                    rows: 2,
                    tooltip: true,
                  }}
                >
                  {contentObj.tip}
                </Typography.Paragraph>
              );
            },
          },
          {
            title: "图片",
            width: "10rem",
            align: "center",
            render(value, contentObj: contentObj) {
              return contentObj.imgUrl !== "1" ? (
                <Image src={contentObj.imgUrl} alt={contentObj.title} />
              ) : null;
            },
          },

          {
            title: "创建时间",
            width: "10rem",
            align: "center",
            render(value, contentObj: contentObj) {
              return (
                <span>{dayjs(contentObj.createTime).format("YYYY-MM-DD")}</span>
              );
            },
          },
          {
            title: "编辑",
            width: "10rem",
            align: "center",
            render(value, contentObj: contentObj) {
              return (
                <Dropdown
                  overlay={
                    <Menu>
                      <Menu.Item key={"edit"}>
                        <Button
                          type={"link"}
                          onClick={() => showModal(contentObj?.id)}
                        >
                          编辑
                        </Button>
                      </Menu.Item>
                      <Menu.Item key={"delete"}>
                        <Button
                          type={"link"}
                          onClick={() =>
                            contentObj.id
                              ? onDeleteContent(contentObj.id)
                              : null
                          }
                        >
                          删除
                        </Button>
                      </Menu.Item>
                    </Menu>
                  }
                >
                  <Button type={"link"}>...</Button>
                </Dropdown>
              );
            },
          },
        ]}
      />
    </Container>
  );
};
const Container = styled.div`
  position: relative;
  width: 80%;
`;
